<template>
  <div>
<!--    填写处理建议之前展示的界面-->
    <el-card
             style="width: 900px;height: 500px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 20px;">
      <el-button type="primary" plain @click="yuLan">预览</el-button>
      <el-form ref="form" :model="form" label-width="150px">
        <div style="margin-top: 20px">
          <el-form-item style="margin-left: -50px" label="处理建议" prop="handlingOpinions">
            <el-input
              style="width: 80%"
              type="textarea"
              :rows="4"
              resize="none"
              placeholder="请输入内容"
              v-model="form.handlingOpinions">
            </el-input>
          </el-form-item>
          <div class="line"/>
          <el-form-item style="margin-left: -50px" label="处理图片" prop="handlingPicture">
            <image-upload :readonly="disabled" :limit="3" v-model="form.handlingPicture"/>
          </el-form-item>
          <el-form-item style="margin-left: -48px">
            <el-button :disabled="disabled" type="primary" plain @click.prevent="tijiao">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <!--    如果是处理后的则展示这个界面-->
    <el-dialog
      title="预览报告"
      :visible.sync="dialogVisible"
      :fullscreen="true">
    <div  style="height: 800px;overflow: auto;">
      <el-button type="primary" plain @click="printPDF">导出为PDF</el-button>
      <div  id="pdf" style="padding: 30px 60px 60px 60px;">
        <div style="text-align: left">
          <img src="../../../../assets/images/logo.png">
        </div>
        <!--      这块的需求不定后期可能会变成每个人都可以填写处理建议所以用的是v-for遍历-->
        <div v-for="(item, index) in this.reportList " :key="item.id" :data="reportList">
          <div style="font-family: 微软雅黑;font-size: 35px;text-align: center">
            <dict-tag style="display: inline-block;" :options="dict.type.he_report_event_type" :value="chuli"/>
            <span>处理详细</span>
          </div>
          <table style="font-family: 微软雅黑;font-size: 20px;border-collapse: collapse;text-align: center;margin: 0 auto;margin-top: 20px"
                 border="2" width="100%">
            <tr style="height: 50px;" >
              <td colspan="1" width="10%">诊断类别</td>
              <td colspan="1" width="10%">
<!--                引用字典-->
                <dict-tag :options="dict.type.he_diagnosis_category" :value="item.patientDiagnosisCategory"/>
              </td>
              <td colspan="1" width="10%">病历号/门诊号</td>
              <td colspan="1" width="10%">{{item.patientRecordOutpatient}}</td>
              <td colspan="1" width="10%">姓名</td>
              <td colspan="1" width="10%">{{item.patientName}}</td>
<!--              he_patient_gender-->
              <td colspan="1" width="10%">性别</td>
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_patient_gender" :value="item.patientGender"/>
              </td>
<!--              直接读取就好不需进行转化一系列-->
              <td colspan="1" width="10%">出生日期</td>
              <td colspan="1" width="10%">{{formatDate(item.patientDateOfBirth)}}</td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%">家属联系电话</td>
              <td colspan="1" width="10%">{{item.patientFamilyNumber}}</td>
              <td colspan="1" width="10%">入诊就诊时间</td>
              <td colspan="3" width="10%">{{item.patientAdmissionTime}}</td>
<!--              <td colspan="1" width="10%">床号</td>-->
<!--              <td colspan="1" width="10%">{{item.patientBedNumber}}</td>-->
<!--              he_patient_nursing_level-->
              <td colspan="1" width="10%">护理级别</td>
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_patient_nursing_level" :value="item.patientNursingLevel"/>
              </td>
<!--              he_patient_education_level-->
              <td colspan="1" width="10%">文化程度</td>
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_patient_education_level" :value="item.patientEducationLevel"/>
              </td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%" style="height: 300px">诊断</td>
              <td style="text-align: left;padding: 10px;vertical-align: top;" colspan="9" width="90%">
                {{item.patientDiagnosis}}
              </td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%">发生日期</td>
              <td colspan="3" width="30%">{{formatDate(item.occurrenceDate)}}</td>
              <td colspan="1" width="10%">发生地点</td>
              <td colspan="5" width="50%">{{item.occurrenceLocation}}</td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%">当事人姓名</td>
              <td colspan="1" width="10%">{{item.partyName}}</td>
              <td colspan="1" width="10%">当事人年龄</td>
              <td colspan="1" width="10%">{{item.partyAge}}</td>
              <td colspan="1" width="10%">工作年限</td>
<!--              he_years_of_experience-->
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_years_of_experience" :value="item.partyYearsOfExperience"/>
              </td>
<!--              he_education-->
              <td colspan="1" width="10%">学历</td>
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_education" :value="item.partyEducation"/>
              </td>
<!--              he_position-->
              <td colspan="1" width="10%">职务</td>
              <td colspan="1" width="10%">
                <dict-tag :options="dict.type.he_position" :value="item.partyPosition"/>
              </td>
            </tr>
            <tr style="height: 50px">
              <!--              he_severity_of_injury-->
              <td colspan="1" width="10%">伤害严重度</td>
              <td colspan="4" width="40%">
                <dict-tag :options="dict.type.he_severity_of_injury" :value="item.resultsSeverityInjury"/>
              </td>

<!--              he_event_classification-->
              <td colspan="1" width="10%">事件分级</td>
              <td colspan="4" width="40%">
                <dict-tag :options="dict.type.he_event_classification" :value="item.resultsEventClassification"/>
              </td>
            </tr>
            <tr style="height: 50px">
              <!--              he_event_severity-->
              <td colspan="1" width="10%">事件严重程度</td>
              <td colspan="9" width="90%">
                <dict-tag :options="dict.type.he_event_severity" :value="item.resultsEventSeverity"/>
              </td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%"  style="height: 500px">处理建议</td>
              <td style="text-align: left;padding: 10px;vertical-align: top;" colspan="9"  width="90%">{{item.handlingOpinions}}</td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" style="height:200px " width="10%">处理图片</td>
              <td style="text-align: left;padding: 10px;" colspan="9" width="90%">
                <div class="image-container">
                  <div v-for="(imageUrl, index) in imageUrls" :key="index">
                    <img :src="imageUrl" style="width: 200px;height: 200px" class="horizontal-image">
                  </div>
                </div>
              </td>
            </tr>
            <tr style="height: 50px">
              <td colspan="1" width="10%">处理人</td>
              <td style="text-align: left;padding: 10px;" colspan="19" width="90%">
                {{item.handingPerson}}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getReport, jianyiReport, listReport} from "@/api/module/shao/shijian/report";
  import {downloadPDF} from "@/api/module/shao/shijian/htmlToPdf.js"
  export default {
    name: "Report",
    // 引入字典
    dicts: ['he_severity_of_injury', 'he_event_severity', 'he_education', 'he_patient_gender', 'he_party_post', 'he_report_event_state', 'he_report_event_type', 'he_patient_age_grades', 'he_event_severity', 'he_review_status', 'he_report_status', 'he_position', 'he_event_classification', 'he_review_event_type', 'he_possibility_of_dispute', 'he_patient_involved', 'he_analyze_reports', 'he_fallback_status', 'he_occurrence_time_period', 'he_event_determinatione', 'he_situation_measures_event', 'he_patient_education_level', 'he_diagnosis_category', 'he_years_of_experience', 'he_severity_of_injury', 'he_reporting_method', 'he_patient_nursing_level', 'he_date_type', 'he_invalidation_status', 'he_patient_ethnic_group', 'he_category', 'he_handling_status'],
    props: ['disabled'],
    data() {
      return {
        dialogVisible:false,
        // 用于有变数的展示是什么事件
        chuli: '',
        //由于后台可能传多张图片这里是一个数组用于分割
        imageUrls: [],
        //填写完处理建议查询的那个数组
        reportList: [],
        // 查询参数
        queryParams: {
          reportEventNumber: null,
          handlingStatus: null,
        },
        // 表单参数
        form: {},
      };
    },
    created() {
      //接受type值即事件类型
      const type = this.$route.query.type;
      //将其赋给this.chuli这个变量用于前端展示
      this.chuli = type
      const number = this.$route.query.number
      //将查询条件赋值
      this.queryParams.reportEventNumber = number;
      this.getList();
      getReport(this.$route.query.id).then(response => {
        this.form = response.data;
      });
    },
    methods: {
      //将年月日去掉的方法
      formatDate(dateString) {
        if(dateString!=null){
          // Parse the date string to a JavaScript Date object
          const date = new Date(dateString);
          // Extract the date part (year, month, and day)
          const year = date.getFullYear();
          const month = date.getMonth() + 1; // Month is zero-indexed, so add 1
          const day = date.getDate();
          // Format the date as YYYY-MM-DD
          const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
          return formattedDate;
        }
      },
      //渲染加载器
      openFullScreen1() {
        const loading = this.$loading({
          lock: true,
          text: '请稍等,正在渲染!',
          spinner: 'el-icon-loading',
          background: 'rgba(37,36,36,0.16)'
        });
        setTimeout(() => {
          loading.close();
        }, 700);

      },
      // 打印PDF主页
      printPDF() {
        downloadPDF(document.querySelector("#pdf"), "处理详细报告" + new Date().getTime())
      },
      //预览
      yuLan(){
        this.getList()
        this.dialogVisible=true
      },
      /** 查询事件上报信息列表 */
      getList() {
        listReport(this.queryParams).then(response => {
          this.reportList = response.rows;
          if (this.reportList.length!=0){
            if (this.reportList[0].handlingPicture != null) {
              this.imageUrls = this.reportList[0].handlingPicture.split(',');
            }
          }
        });
      },
      // 提交按钮事件
      tijiao() {
        // //将处理的状态变成已处理
        this.form.note10 = '01'
        //重新写后台方法由于这个操作需要同时新增两张表
        jianyiReport(this.form).then(response => {
          this.$modal.msgSuccess("处理建议填写成功");
          this.$forceUpdate();
          this.getList();
        });
      },
    }
  };
</script>
<style scoped>
  .image-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: nowrap; /* 不换行 */
    overflow-x: auto; /* 如果图片超出容器宽度，显示水平滚动条 */
  }
  .horizontal-image {
    margin-right: 10px; /* 添加间距，使图片之间有一定的间隔 */
  }
</style>
